<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="paryorder-content">
		<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
		<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="true">
			<template #top>
				<view class=""  style="background-color: #F8F8F8;">
					<u-navbar :border-bottom="false" title="品牌授权" :background="{'background':'#F8F8F8'}" :title-size="36" :title-bold="true" :title-color="textColor">
						<template #right>
							<view class="u-p-r-20"  @click="$mRouter.push({route:'/pages/owners/Invite/index'})" >
								签约
							</view>
						</template>
						
					</u-navbar>
					<view class="u-p-20 u-flex" style="background-color: #F8F8F8;">
						<u-search :searchIconFlag="true" v-model="searchText" input-align="center" placeholder="授权商户名称" height="70" 
						:border-color="'#FFBB1A'" :bg-color="'#F8F8F8'" 	:show-action="false" @change="reloadFn" @search="reloadFn"></u-search>
						<view class="choose-level u-flex u-row-between"  @click="templateShow = true">
							<text :class="['u-font-12',{'placeholder-text':chooseLevelId==''}]">{{chooseLevelId!=''?chooseLevelName:'级别'}}</text>
							<u-icon name="arrow-right" color="#999"></u-icon>
						</view>
					</view>
				</view>
			</template>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="payorder-container u-relative" v-for="(item,index) in dataList" :key="index" >
				<text class="u-font-12 u-p-8 u-absolute" style="background-color:#ff551a; color: #fff;border-radius:0 0 14rpx 0;left: 0;top: 0;">
					{{item.shopLevelName}}
				</text>
				<view class="payorder-section ">
					<view class="section-list">
						<view class="section-item u-m-l-18">
							<view class="u-flex" style="width:100%;margin-bottom: 28rpx;">
								<image :src="item.url||'/static/logo.png'" class="section-image"></image>
								<view class="section-item-name " >
									<view class="u-m-r-10 u-font-30">
										{{item.name}}
									</view>
									<view class="u-flex">
										<view class="section-item-count u-m-r-10" >
											代签约<text class="u-font-24 u-m-l-10" :style="{'color':item.allowRecommend?'#1f6b16':'#333'}">{{item.allowRecommend?'开启':'关闭'}}</text>
										</view>
										<view class="section-item-count" >
											|
										</view>
										<view class="section-item-count u-m-l-10" >
											平台销售权限<text class="u-font-24 u-m-l-10" :style="{'color':item.sale?'#1f6b16':'#333'}">{{item.sale?'开启':'关闭'}}</text>
										</view>
									</view>
								</view>
							</view>
							<view class="u-flex permission-list">
								<view class="permission-item" @click="openLevelItemFn(item)">查看商品</view>
								<view class="permission-item" @click="openTrade(item,1)">
									<text class="u-font-28" :style="{'color':item.purchase?'#ff551a':'#999'}">查看采购</text>
								</view>
								<view class="permission-item" @click="openTrade(item,2)">
									<text class="u-font-28" :style="{'color':item.sale?'#ff551a':'#999'}">查看销售</text>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="u-flex u-col-center u-row-between u-m-l-20" style="height: 100%;">
						<view class="section-btn-box u-m-r-40" @click="editContractBtnTapFn(item)">
							<image src="/static/owners/editContract.png" mode="" style="height: 46rpx;width: 46rpx;"></image>
						</view>
						<view class="section-btn-box" @click="delTemplateTap(item.customerId)">
							<image src="/static/xiaoshou/delPrice.png" mode="" style="height: 46rpx;width: 46rpx;" ></image>
						</view>
					</view> -->
				</view>
			</view>
			<template #bottom>
				<view class="u-flex " style="background-color: #fff;">
					<view class="u-flex u-row-center u-p-t-40 u-p-b-40" style="flex:1;border-right: 1px solid #eaeaea;" @click="getQrcode">
						<view style="width: 80rpx; height: 80rpx; border-radius: 50%;background-color: #ffbb1a;" class="u-flex u-row-center u-col-center">
							<view class="iconfont icon-erweima" style="font-size: 36rpx;"></view>
						</view>
						<text class="u-font-28 u-m-l-30" style="text-align: center;font-weight:500;">推广码</text>
					</view>
					<view class="u-flex u-row-center u-p-t-40 u-p-b-40" style="flex:1;" @click="$mRouter.push({route:'/pages/owners/Invite/index'})" >
						<view style="width: 80rpx;height: 80rpx; border-radius: 50%;background-color: #ffbb1a;" class="u-flex u-row-center u-col-center">
							<u-icon name="scan" style="font-size:44rpx;font-weight: bold;"></u-icon>
						</view>
						<text class="u-font-28 u-m-l-30" style="text-align: center;font-weight: 500;">去签约</text>
					</view>
				</view>
			</template>
			
		</z-paging>
		<u-modal v-model="delModel" :content="'您确定要移除此级别吗？'" ref="delModel" :async-close="true"  @confirm="delTemplateFn()" ></u-modal>
		<u-modal v-model="chooseLevelModel" ref="editModel" :async-close="true"  @confirm="editContractFn()" @cancel="camcelLevelModel" title="编辑合约内容" >
			<view class="u-p-35 " >
				<view  class=" u-p-t-30 u-p-b-30 u-font-32  u-flex u-col-center" style="background-color: #fff;">
					<view class="">
						级&nbsp&nbsp;&nbsp;别
					</view>
					<view class="u-flex u-col-center u-row-between"  style="flex:1;" @click="templateShow = true">
						<view class="u-m-l-30"  :style="{'flex':1,'color':chooseLevelName==='请选择价格级别'?'rgb(192, 196, 204)':'#333'}">
							{{chooseLevelName}}
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
					
				</view>
				<view  class=" u-p-t-30 u-p-b-30 u-font-32  u-flex u-col-center" style="background-color: #fff;">
					<view class="">
						销售员
					</view>
					<view class="u-flex u-col-center u-row-between"  style="flex:1;" @click="employShow = true">
						<view class="u-m-l-30"  :style="{'flex':1,'color':chooseEmployName==='请选择销售员'?'rgb(192, 196, 204)':'#333'}">
							{{chooseEmployName}}
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</u-modal>
		
		<u-popup v-model="templateShow" mode="bottom" @close="reloadFn()">
			<view style="min-height: 800rpx;">
				<view class="u-text-center  u-font-32" style="line-height: 100rpx;height: 100rpx;font-weight: bold;">
					选择价格级别
					<view class="u-absolute" style="top: 0rpx; right: 20rpx;color: #ff551a;" @click="clearLevelFn()">清空</view>
				</view>
				<levelList :chooseId="chooseLevelId" @sendValue="sendValue"></levelList>
			</view>
		</u-popup>
		<u-popup v-model="employShow" mode="bottom">
			<view style="min-height: 800rpx;">
				<view class="u-text-center  u-font-32" style="line-height: 100rpx;height: 100rpx;font-weight: bold;">
					选择销售员
				</view>
				<EmployeeList :chooseEmployee="chooseEmployId" @getEmployee="getEmployeeFn"></EmployeeList>
			</view>
		</u-popup>
		<!-- 二维码显示 -->
		<u-modal v-model="erweimaShow" width="60%" :show-title="false" :show-confirm-button="false" :show-cancel-button="false" :mask-close-able="true">
			<view class="slot-content">
				<view class="u-text-center u-m-t-20">
					推广码
				</view>
				<img :src="erweima" style="width: 100%;" mode="" />
				<!-- #ifdef APP-PLUS -->
				<view class="u-text-center u-p-t-20 u-p-b-20" style="border-top: 1px solid #eee;" @click="saveLocationFn">
					<u-icon name="download"></u-icon>
					<text class="u-m-l-10">点击保存图片</text>
				</view>
				<!-- #endif -->
			</view>
		
		</u-modal>
	</view>
</template>

<script>
	import levelList from './compontents/levelList.vue'
	import EmployeeList from './compontents/EmployeeList.vue'
	import { useUserStore } from '@/store/user.js';
	import { useShopStore } from '@/store/shop.js';
	import { mapState } from 'pinia';
	export default {
		components:{levelList,EmployeeList},
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				searchText:'',
				delModel:false,
				delContractId:'',
				chooseLevelValue:0,
				chooseLevelModel:false,
				templateShow:false,
				employShow:false,
				exportMethod:1,
				chooseLevelId:'',
				chooseLevelName:'请选择价格级别',
				chooseEmployId:'',
				chooseEmployName:'请选择销售员',
				chooseCustomerId:'',
				destinationShopLevelId:'',
				erweimaShow:false,
				erweima:'',
			}
		},
		computed:{
			...mapState(useUserStore, {
				storeUser: 'user',
			}),
			...mapState(useShopStore, {
				storeShop: 'shop',
			})	
		},
		methods: {
			openTrade(item,type){
				let data=`?customId=${item.shopId}&type=${type}&customName=${item.name}`;
				this.$mRouter.push({route:'/pages/owners/tradeList/index'+data});
			},
			openLevelItemFn(item){
				let data = `?templateId=${item.shopLevelId}&name=${item.shopLevelName}&shopName=${item.name}&shopLogo=${item.url||''}`
				this.$mRouter.push({route:'/pages/owners/contractMange/customerItem'+data})	
			},
			clearLevelFn(){
				this.chooseLevelId='';
				this.chooseLevelName='';
				this.templateShow = false;
			},
			// 获取推广二维码
			async getQrcode() {
				this.$u.toast('功能正在加急开发中...');
				// uni.showLoading({
				// 	title:'loading...'
				// })
				// const res = await this.$newHttp.get('api/v1.2/Shop/GetPersonalPromotionQRCodeImage/personalPromotionQRCodeImage.jpg', { responseType: 'arraybuffer'})
				// uni.hideLoading();
				// if(res){
				// 	this.erweima = 'data:image/jpeg;base64,'+ uni.arrayBufferToBase64(res);
				// 	this.erweimaShow = true;
				// }else{
				// 	this.$u.toast('获取推广码失败！');
				// }
			},
			saveLocationFn(){
				let base64 = this.erweima;
				 const bitmap = new plus.nativeObj.Bitmap("test");
				     bitmap.loadBase64Data(base64, function() {
				         const url = "_doc/" + new Date().getTime() + ".png";  // url为时间戳命名方式
				         console.log('saveHeadImgFile', url)
				         bitmap.save(url, {
				             overwrite: true,  // 是否覆盖
				             // quality: 'quality'  // 图片清晰度
				         }, (i) => {
				             uni.saveImageToPhotosAlbum({
				                 filePath: url,
				                 success: function() {
				                     uni.showToast({
				                         title: '图片保存成功',
				                         icon: 'none'
				                     })
				                     bitmap.clear()
				                 }
				             });
				         }, (e) => {
				             uni.showToast({
				                 title: '图片保存失败',
				                 icon: 'none'
				             })
				             bitmap.clear()
				         });
				     }, (e) => {
				         uni.showToast({
				             title: '图片保存失败',
				             icon: 'none'
				         })
				         bitmap.clear()
				}); 
			},
			reloadFn(){
				this.$refs.paging.reload();
			},
			editContractBtnTapFn(item){
				// this.destinationShopLevelId = id;
				this.chooseEmployId = item.brandOwnerSalesmanId;
				this.chooseEmployName = item.brandOwnerSalesman?item.brandOwnerSalesman:'请选择销售员';
				this.chooseLevelName = item.shopLevelName;
				this.chooseLevelId = item.shopLevelId;
				this.chooseCustomerId = item.customerId;
				this.chooseLevelModel = true;
			},
			sendValue(val){
				this.chooseLevelId = val.id;
				this.chooseLevelName = val.name;
				this.templateShow = false;
			},
			getEmployeeFn(val){
				this.chooseEmployId =val.userId;
				this.chooseEmployName = val.realname;
				this.employShow = false;
			},
			camcelLevelModel(){
				this.chooseLevelId = '';
				this.chooseLevelName = '请选择价格级别';
				this.chooseEmployId = '';
				this.chooseEmployName = '请选择销售员';
			},
			// 从其他级别中导入价格
			async editContractFn(){
				uni.showLoading({
					title:"loading..."
				})
				if(this.chooseLevelId === ''){
					uni.hideLoading();
					this.$refs.editModel.clearLoading();
					this.$u.toast('价格级别不得为空');
					return false;
				};
				if(this.chooseEmployId === ''){
					uni.hideLoading();
					this.$refs.editModel.clearLoading();
					this.$u.toast('销售员不得为空');
					return false;
				};
				let params = {
					shopId:this.storeShop.id,
					shopLevelId:this.chooseLevelId,
					brandOwnerSalesmanId:this.chooseEmployId,
					customerId:this.chooseCustomerId
				}
				const res =  await this.$newHttp.post('api/BrandOwner/SaveCustomer',params);
				uni.hideLoading();
				if(res.code === 200){
					uni.showToast({
						title:'合约编辑成功',
					})
					this.chooseLevelModel = false;
					this.reloadFn();
				}else{
					this.$refs.editModel.clearLoading();
					this.$u.toast('级别价格导入失败');
				}
			},
			// 删除按钮点击
			delTemplateTap(id){
				this.delContractId = id;
				this.delModel = true;
			},
			// 删除价格级别
			async delTemplateFn(){
				uni.showLoading({
					title:"loading..."
				})
				let params = {
					customerId:this.delContractId,
					shopId:this.storeShop.id,
					
				}
				const res = await this.$newHttp.delete('api/BrandOwner/DeleteCustomer',params);
				console.log(res);
				uni.hideLoading();
				if(res.code === 200){
					uni.showToast({
						title:'删除成功',
					});
					this.delModel = false;
					this.$refs.paging.reload();
				}else{
					this.$u.toast('删除失败');
				}
			},
			async queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
					shopId:this.storeShop.id,
					UserId:this.storeUser.id,
					// isDeleted:false
				}
				if(this.chooseLevelId!==''){
					params.ShopLevelId = this.chooseLevelId;
				}
				if(this.searchText!==''){
					params.name = this.searchText;
				}
				uni.showLoading({
					title: '加载中...',
					mask: false
				});
				// const res = await this.$newHttp.get('api/BrandOwner/GetCustomers', {params:params} );
				const res = await this.$newHttp.get('api/BrandOwnerSalesman/GetMyCustomersPage', {params:params} );
				uni.hideLoading({
					title: '加载中...'
				})
				if(res.code === 200){
					this.$refs.paging.complete(res.data.list);
				}else{
					this.$refs.paging.complete(false);
				}
			},
			itemClick(item) {
				console.log('点击了', item.title);
				this.$mRouter.push({ 
					route: '/pages/sale/payorder/createPayOrder?shop='+item.id,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/static/iconfont/iconfont.css';
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.paryorder-content {
		height: 100%;
	}
	.choose-level{
		border-radius: 35rpx;
		height: 70rpx;
		background: #f8f8f8;
		border: 1px solid #FFBB1A;
		margin-left: 10rpx;
		width: 244rpx;
		padding: 0 14rpx 0 24rpx;
		.placeholder-text{
			color: #999;
		}
	}
	.payorder-container{
		background-color: #fff;
		box-sizing: border-box;
		padding: 0 30rpx;
		.payorder-header{
			display: flex;
			justify-content: space-between;
		}
		.payorder-section{
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 50rpx 0 0;
			margin-bottom: 20rpx;
			.section-image{
				width: 80rpx;
				height: 80rpx;
				display: block;
				border-radius: 50%;
				margin-right: 32rpx;
			}
			.section-list{
				flex: 1;
				overflow: hidden;
				// margin-left: 20rpx;
				.section-btn{
					width: 160rpx;
					margin-left: 10rpx;
					height:70rpx;
					border-radius: 35rpx;
					border: 1rpx solid #FFBB1A;
					color: #FFBB1A;
					text-align: center;
					line-height: 70rpx;
				}
				.section-btn-disabled{
					border-color:#999999;
					color: #999999;
				}
				.section-item{
					width: 100%;
					.section-item-name{
						font-size: 30rpx;
						font-weight: 500;
					}
					.section-item-count{
						font-size: 24rpx;
						color: #999;
					}
					.permission-list{
						padding: 28rpx 0;
						border-top: 1rpx solid #E5E5E5;
						.permission-item{
							flex:1;
							text-align: center;
							font-size: 28rpx;
							color: #ff551a;
						}
						.permission-item:nth-of-type(2){
							border-left: 1rpx solid #E5E5E5;
							border-right: 1rpx solid #E5E5E5;
						}
					}
					
				}
			}
			.section-btn-box{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				>.btn-text{
					font-size: 20rpx;
					margin-top: 10rpx;
				}
			}
			
		}
		
	}


</style>
